<template>
  <div>
    <a-card title="查询条件">
      <a-row>
        <a-col class="param_item_label" :span="2">处理状态：</a-col>
        <a-col :span="3">
          <a-select v-model:value="param.isHandle" style="width: 100%">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="true">已处理</a-select-option>
            <a-select-option value="false">未处理</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="1"/>
      </a-row>
      <div class="operation_row">
        <a-button type="primary" @click="getPage(1,10)">查询</a-button>
      </div>
    </a-card>
    <br>
    <a-card title="举报列表">
      <a-table rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="pagination" :loading="loading"
               bordered>
        <template #expandedRowRender="{ record }">
          <p><b>举报原因：</b></p>
          <p>
            {{ record.content }}
          </p>
          <p v-if="record.handleContent"><b>处理结果：</b></p>
          <p>
            {{ record.handleContent }}
          </p>
        </template>
        <template #senderName="{ record }">
          <router-link :to="`/u/${record.senderDomain}`">{{ record.senderName }}</router-link>
        </template>
        <template #userName="{ record }">
          <router-link :to="`/u/${record.userDomain}`">{{ record.userName }}</router-link>
        </template>
        <template #isHandle="{ record }">
          <span v-if="record.isHandle">已处理</span>
          <span v-else>未处理</span>
        </template>
        <template #action="{ record }">
          <span>
            <a @click="openHandleModal(record)" v-if="!record.isHandle">处理</a>
          </span>
        </template>
      </a-table>
    </a-card>
    <!-- 处理结果弹窗 -->
    <a-modal v-model:visible="handleModalShow" title="反馈处理结果" @ok="commitHandle">
      <a-textarea v-model:value="handleMessage.handleContent" :maxlength="500" :autosize="{ minRows: 5, maxRows: 10 }"
                  showCount placeholder="请填写处理结果..."/>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, onMounted, reactive, toRefs } from 'vue'
import { GetAlertMessagePage, HandleAlert } from '@/service/message'

export default defineComponent({
  setup () {
    const { proxy } = getCurrentInstance()
    const state = reactive({
      param: {
        isHandle: ''
      },
      loading: true,
      dataSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: async (page, size) => {
          await methods.getPage(page, size)
        }
      },
      columns: [{
        title: '举报人名称',
        dataIndex: 'senderName',
        width: '10%',
        slots: {
          customRender: 'senderName'
        }
      }, {
        title: '被举报人名称',
        dataIndex: 'userName',
        width: '10%',
        slots: {
          customRender: 'userName'
        }
      }, {
        title: '状态',
        dataIndex: 'isHandle',
        width: '5%',
        slots: {
          customRender: 'isHandle'
        }
      }, {
        title: '处理人名称',
        dataIndex: 'handleUserName',
        width: '10%'
      }, {
        title: '举报时间',
        dataIndex: 'createdTime',
        width: '15%'
      }, {
        title: '处理时间',
        dataIndex: 'handleTime',
        width: '15%'
      }, {
        title: '操作',
        key: 'action',
        slots: {
          customRender: 'action'
        }
      }],
      handleModalShow: false,
      handleMessage: {
        id: '',
        senderId: '',
        userId: '',
        handleContent: ''
      }
    })

    const methods = reactive({
      getPage: async (page, size) => {
        state.loading = true
        const {
          count,
          list
        } = await GetAlertMessagePage(state.param.isHandle, page, size)
        state.pagination.current = page
        state.pagination.pageSize = size
        state.pagination.total = count
        state.dataSource = list
        state.loading = false
      },
      openHandleModal: async (alterMessage) => {
        state.handleMessage.id = alterMessage.id
        state.handleMessage.senderId = alterMessage.senderId
        state.handleMessage.userId = alterMessage.userId
        state.handleMessage.handleContent = ''
        state.handleModalShow = true
      },
      commitHandle: async () => {
        await HandleAlert(state.handleMessage)
        state.handleModalShow = false
        proxy.$message.success('反馈处理结果成功！')
        await methods.getPage(1, 10)
      }
    })

    onMounted(async () => {
      await methods.getPage(1, 10)
    })

    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
  }
})
</script>

<style lang="less" scoped>
</style>
